<template>
  <transition name="sidebar">
    <div class="sidebarWrapper" v-show="iShowFlag" @click="hide">
      <div class="sidebar" ref="sidebar" @click.stop>
        <el-menu router :default-active="$route.path" @select="hide">
          <el-menu-item index="/home" :route="{ path: '/home' }">
            <span slot="title">首页</span>
          </el-menu-item>
          <!-- <el-menu-item index="/company" :route="{ path: '/company' }">
            <span slot="title">走进虎匠</span>
          </el-menu-item> -->
          <el-submenu index="/company">
            <template slot="title">
              <span slot="title">走进虎匠</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/company/intro" :route="{ path: '/company/intro' }">企业介绍</el-menu-item>
              <el-menu-item index="/company/cult" :route="{ path: '/company/cult' }">企业文化</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/capintro" :route="{ path: '/capintro' }">
            <span slot="title">班组介绍</span>
          </el-menu-item>
          <el-menu-item index="/joinus" :route="{ path: '/joinus' }">
            <span slot="title">加入我们</span>
          </el-menu-item>
          <el-menu-item index="/callus" :route="{ path: '/callus' }">
            <span slot="title">联系我们</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
  </transition>
</template>

<script>
import { debounce } from '@/common/js/util'

const SMAILWIDTH = 800

export default {
  model: {
    prop: 'showFlag',
    event: 'change'
  },
  data() {
    return {
      iShowFlag: false
    }
  },
  props: {
    showFlag: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.iShowFlag = this.showFlag
    window.addEventListener('resize', debounce(this._handleShow, 20))
  },
  mounted() {
  },
  methods: {
    show() {
      this.iShowFlag = true
    },
    hide() {
      this.iShowFlag = false
    },
    _handleShow() {
      // 当前左侧导航栏隐藏，无须调整
      if (!this.iShowFlag) {
        return false
      }

      // 浏览器视口变宽时，收缩左侧导航
      if (window.innerWidth >= SMAILWIDTH) {
        this.iShowFlag = false
      }
    }
  },
  watch: {
    showFlag(newFlag) {
      this.iShowFlag = newFlag
    },

    iShowFlag(newFlag) {
      this.$emit('change', newFlag)
    }
  }
}
</script>

<style lang="stylus" scoped>
.sidebarWrapper
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  background-color: rgba(255,255,255,0.1)
  z-index: 999
  &.sidebar-enter-active, &.sidebar-leave-active
    transition: opacity .3s
    .sidebar
      transition: all .3s
  &.sidebar-enter, &.sidebar-leave-to
    opacity: 0
    .sidebar
      transform: translate(-100%, 0)
  .sidebar
    position: fixed
    top: 0
    left: 0
    bottom: 0
    width: 250px
    background-color: #FFF
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
</style>
